
<style lang="less" scoped>
// 占位div样式
.left-div {
  visibility: hidden;
  border-style: solid;
  border-color: black;
  /* border-right-color: red; */
  border-color: transparent;
}
// 内容部分
.content-wrapper {
  margin: 0px 10px 0px 0px;

  // 表单按钮部分
  .content-request-button {
    height: 28px;
  }
}
</style>

<template>
  <div class="content-request">
    <Row>
      <Col span="3" class="left-div"></Col>
      <Col span="18">
        <div class="content-wrapper">
          <!-- 内容 -->
          <div>
            <Card class="card-request">
              <p slot="title">提问</p>
              <Form ref="RequestForm" :model="requestForm" :label-width="50">
                <Row>
                  <Col>
                    <FormItem label="标题" prop="title">
                      <Input v-model="requestForm.title" placeholder="请输入标题"></Input>
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="12">
                    <FormItem label="专业" prop="profession">
                      <Select
                        v-model="requestForm.professionId"
                        @on-change="professionChange"
                        placeholder="请选择专业"
                        filterable
                      >
                        <Option
                          v-for="profession in professionList"
                          :value="profession.tid"
                        >{{profession.proName}}</Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col span="12">
                    <FormItem label="课程" prop="course">
                      <Select v-model="requestForm.courseId" placeholder="请选择课程" filterable>
                        <Option
                          v-for="course in selectProCourseList"
                          :value="course.tid"
                        >{{course.courseName}}</Option>
                      </Select>
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <FormItem label="内容" prop="content" disabled>
                      <edite-page :formObj="requestForm" :isReset="contentIsReset"></edite-page>
                    </FormItem>
                  </Col>
                </Row>
                <div class="content-request-button">
                  <Button
                    @click="handleReset()"
                    style="margin-left: 8px; float:right"
                  >重置</Button>
                  <Button type="primary" style="float:right" @click="handleSubmit()">提交</Button>
                </div>
              </Form>
            </Card>
          </div>
        </div>
      </Col>
      <Col span="3"></Col>
    </Row>
  </div>
</template>
<script>
import httpUtil from '@/libs/httpUtil'
import editePage from '@/view/components/editor/editor.vue'

export default {
  name: 'Request',
  components: {
    editePage
  },
  data () {
    return {
      requestForm: {},
      contentIsReset: false, // 富文本编辑框是否重置
      professionList: [],
      courseList: [],
      selectProCourseList: [],
      professionCourseRelation: []
    }
  },
  methods: {
    // 当专业选定某一个选项时触发
    professionChange (value) {
      console.log(value)
      if (value) {
        // 1.查找出所选专业的课程id集
        let selectProCourseIds = []
        this.professionCourseRelation.forEach((relate, index, array) => {
          if (value === relate.professionId) {
            selectProCourseIds.push(relate.courseId)
          }
        })

        console.log(selectProCourseIds)

        // 2.根据所选专业课程id集筛选课程
        if (selectProCourseIds.length > 0) {
          this.selectProCourseList = []
          this.courseList.forEach((course, index) => {
            if (selectProCourseIds.indexOf(course.tid) != -1) {
              this.selectProCourseList.push(course)
            }
          })
          console.log(this.selectProCourseList)
        }
      }
    },

    handleSubmit () {
      // this.$refs[name].validate((valid) => {
      //     if (valid) {
      //         this.$Message.success('Success!');
      //     } else {
      //         this.$Message.error('Fail!');
      //     }
      // })
      this.$httpUtil.asyncPost(
        'request_answer/request/save',
        this.requestForm,
        res => {
          if (res.data.code === 200) {
            debugger
            this.handleReset()
            this.$Message.success(res.data.msg)
            this.gotoIndex()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },
    handleReset () {
      this.$refs['RequestForm'].resetFields()
      this.requestForm = {}
      this.contentIsReset = true
      this.selectProCourseList = this.courseList
      setTimeout(() => {
        // 解决第二次重置，富文本框中内容不消失
        this.contentIsReset = false
      }, 500)
    },

    // 跳转的提问页面
    gotoIndex () {
      this.$router.push({ name: 'index' })
    },

    // 获取下拉框列表
    getProfessionCourseData () {
      this.$httpUtil.asyncGet(
        'admin/pc/profession/getAllProfessionCourse',
        {},
        res => {
          if (res.data.code === 200) {
            this.professionList = res.data.records.allProfession
            this.courseList = res.data.records.allCourse
            this.selectProCourseList = this.courseList
            this.professionCourseRelation = res.data.records.relation
          } else {
            this.$Message.success(res.data.msg)
          }
        }
      )
    }
  },
  mounted: function () {
    // 获取列表数据
    this.getProfessionCourseData()
  }
}
</script>
